/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-09-28 16:27:59
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-11 11:40:09
 * @FilePath: /utools_web/src/layouts/components/globalSearch.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { getFetch } from '@/utils/doFetch';
import { SearchOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Avatar, Col, Divider, Empty, Input, Progress, Row, Spin, Tabs, theme, Tooltip } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import IconFont from '../../components/IconFont';
import ItemCard from '../../components/ItemCard';
import FileCard from '../../components/FileCard';
import { List, AutoSizer } from 'react-virtualized';

let col = { span: 24 };

const taskobj = {
  1: {
    text: '未提交',
    color: '#999999',
    says: '创建时间',
  },
  2: {
    text: '审批中',
    color: '#4DA7F3',
    says: '提交时间',
  },
  3: {
    text: '不通过',
    color: '#ff4800',
    says: '驳回时间',
  },
  4: {
    text: '通过',
    color: '#3F9F3F',
    says: '审批时间',
  },
};

function Mission({ keyWord }) {
  const { setInitialState } = useModel('@@initialState');
  const { token } = theme.useToken();
  const { colorBgFourth, colorBgSixth } = token;
  const { data, refresh, loading } = useRequest(
    async () => {
      let res = await getFetch({
        url: '/index/search',
        params: {
          type: 1,
          keyWord,
        },
      });
      return res?.data?.dataList;
    },
    {
      debounceWait: 400,
      refreshDeps: [keyWord],
    },
  );

  return (
    <Spin spinning={loading}>
      <div style={{ height: 'calc(100vh - 280px)', overflow: 'hidden' }}>
        {data?.length > 0 ? (
          <AutoSizer>
            {({ width, height }) => <List
              className="element hidescroll"
              width={width}
              height={height}
              rowCount={data.length}
              rowHeight={128}
              rowRenderer={({
                key, // Unique key within array of rows
                index, // Index of row within collection
                style, // Style object to be applied to row (to position it)
              }) => {
                const it = data[index];
                if (it) {
                  //下方的 div 必须 否则拼命闪
                  return <div key={key} style={{ ...style, justifyContent: "flex-start" }} className='center' onClick={() => {
                    //看详情
                    setInitialState((s) => ({
                      ...s,
                      drawerAll: {
                        ...s.drawerAll,
                        item: it,
                        open: true,
                      },
                      refreshlist: refresh,
                    }));
                  }}>
                    <ItemCard item={it} bg={colorBgFourth} style={{ backgroundColor: colorBgSixth }} refresh={refresh} readonly></ItemCard>
                  </div>
                } else {
                  return null;
                }

              }}
            />}
          </AutoSizer>
        ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 58 }} />}
      </div>
    </Spin>

  );
}


function Filer({ keyWord }) {
  const { data } = useRequest(
    async () => {
      let res = await getFetch({
        url: '/index/search',
        params: {
          type: 3,
          keyWord,
        },
      });
      return res?.data?.dataList;
    },
    {
      debounceWait: 400,
      refreshDeps: [keyWord],
    },
  );

  return (
    <div style={{ height: 'calc(100vh - 280px)', overflow: 'hidden', marginRight: -12 }}>
      <Scrollbars
        thumbMinSize={10}
        autoHide
        style={{
          width: '100%',
          height: '100%',
        }}
        hideTracksWhenNotNeeded
      >
        <div style={{ paddingRight: 12 }}>
          <Row gutter={12}>
            {data?.map((it, i) => {
              return (
                <Col {...col} key={i}>
                  <FileCard item={it}></FileCard>
                </Col>
              );
            })}
          </Row>
          {data?.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>}
        </div>
      </Scrollbars>
    </div>
  );
}

function GlobalSearch({ value, setSearch, inputRef }) {
  const { token: { colorBgSixth } } = theme.useToken();

  const items = [
    {
      key: '2',
      label: '节点',
      children: <Mission keyWord={value}></Mission>,
    },
    {
      key: '3',
      label: '文件',
      children: <Filer keyWord={value}></Filer>,
    },
  ];

  const onChange = (key) => {
    console.log(key);
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 12 }}>
      <Input
        ref={inputRef}
        placeholder="全局搜索"
        prefix={<SearchOutlined />}
        value={value}
        onChange={(e) => {
          setSearch((s) => ({
            ...s,
            value: e.target.value,
          }));
        }}
        allowClear
      ></Input>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  );
}

export default GlobalSearch;
